{% extends 'base.html' %}

{% block body %}
    <div id="parallax"><!-- Parallax Area -->

        <!-- Banner Area -->
        <section class="pages_banner_area">
            <img src="../static/images/parallax-layer/banner-layer-3.png" alt="" class="layer layer_1"
                 data-depth="0.10">
            <div class="container">
                <h2>病因追查</h2>
                <ol class="breadcrumb">
                    <li><a href={{ url_for('index') }}>首页</a></li>
                    <li><a href={{ url_for('causes') }} class="active">病因追查</a></li>
                </ol>
            </div>
        </section>
        <!-- End Banner Area -->

        <!-- Stack-bar Area -->
        <section class="pricing_area pa_3">
            <div class="container">
                {#                <h2 class="tittle">世界概览</h2>#}
                <div class="row" style="margin: 0 auto;">
                    <div style="display: flex;flex-direction: column;width: 19%;height: 19%;margin-right: 4%;margin-left: 3%">
                        <img src="../static/images/syokuji_hamburger_boy.png" alt="肥胖"
                             style="">
                        <p style="margin: 0 auto;padding-top: 3%">肥胖</p>
                    </div>
                    <div style="display: flex;flex-direction: column;width: 25%;height: 25%;margin-right: 6%">
                        <img src="../static/images/sick_kansensyou.png" alt="感染"
                             style="">
                        <p style="margin: 0 auto;padding-top: 1%">感染</p>
                    </div>
                    <div style="display: flex;flex-direction: column;width: 20%;height: 20%;margin-right: 6%">
                        <img src="../static/images/sick_alcohol_chudoku.png" alt="酒精"
                             style="">
                        <p style="margin: 0 auto;padding-top: 5%">饮酒</p>
                    </div>
                    <div style="display: flex;flex-direction: column;width: 17%;height: 17%">
                        <img src="../static/images/higasa_woman.png" alt="紫外线" style="">
                        <p style="margin: 0 auto;padding-top: 5%">紫外线</p>
                    </div>
                </div>
                <p style="margin-bottom: 10%;padding-top: 3%">造成癌症的四大诱因是肥胖(Obesity)、感染(Infection)、饮酒(Alcohol)
                    和紫外线(UV Radiation)。</p>
                <div class="row" style="margin: 0 auto;padding-left: 15%">
                    <form method='GET' action='/'>
                        <!-- Main component for a primary marketing message or call to action -->
                        {{ pie1_charts|safe }}
                    </form>
                </div>
                <p style="margin-bottom: 10%;padding-top: 3%">
                    由图可知，由感染造成的癌症病例在四个不同诱因中所占比例最高，甚至超过了半数。紧接其后的是饮酒与肥胖两个因素。由此我们可以得出，
                    在预防癌症上，我们要多注意个人健康状况。如患上疾病，最好尽快就医尽早治疗。同时，也要注意适量饮酒与饮食，平时多运动保持健康身材。
                    但也不能忘记，无论在室内还是室外都要做好紫外线的防护。
                </p>
                <div class="row" style="margin: 0 auto;padding-left: 15%">
                    <form method='GET' action='/'>
                        <!-- Main component for a primary marketing message or call to action -->
                        {{ pie2_charts|safe }}
                    </form>
                </div>
                <p style="margin-bottom: 10%;padding-top: 3%">
                    我们可以看到，每个洲因不同诱因患癌的比例各不相同。亚洲、非洲、美洲与欧洲最大的诱因皆是感染，而大洋洲则是紫外线。根据现实推断，
                    造成这种差异的可能与地理环境、饮食文化、人种差异等的因素有关。
                </p>
            </div>
        </section>
        <!-- End Stack-bar Area -->

        <!-- Feature Work Area -->
        <section class="feature_work_area fwa_2 fwa_3">
            <img src="../static/images/parallax-layer/feature-work-bg.png" alt="" class="layer layer_1"
                 data-depth="0.20">
            <div class="container">
                <h2 class="tittle">接下来</h2>
                <div class="row">
                    <div class="col-lg-6 feature_img wow fadeInLeft">
                        <img src="../static/images/fetures_bg.png" alt="" class="fetures_bg layer" data-depth="0.10">
                        <img src="../static/images/computer_doctor_woman.png" alt="">
                    </div>
                    <div class="col-lg-6 feature_content wow fadeInRight">
                        <h2>今日概况</h2>
                        <p>呈现185个国家在2020年按性别和年龄组对36种癌症的发病率、死亡率的数据可视化分析。 </p>
                        <div style="display: flex;flex-direction: row">
                            <a href={{ url_for('today') }} class="theme_btn">下一项</a>
                            <a href={{ url_for('index') }} class="theme_btn" style="margin-left: 10%">回到首页</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Feature Work Area -->

    </div>
    <!-- End Parallax -->

{% endblock %}
